<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'WeworkQrList'
	})
</script>
<script setup>
	import {
		multiStaffChoose,memberChartTab
	} from '../lib/index'
	import * as echarts from 'echarts'
	import {
		dateTypes
	} from '@/utils'
	import {
		staffListData
	} from '@/data'
	import MyIcon from '@/components/my-icon/index.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import {postDataStaffBar} from '@/api'
	const total = ref(7)
	const getData=async()=>{
		const r = await postDataStaffBar()
		let xData = []
	let yData = []
		if (r){
			total.value = r.data.size
			r.data.list.forEach(item=>{
				xData.push(item.name)
				yData.push(item.num)
			})
		}
		let myChart = echarts.init(document.getElementById('myChart1'))
	// 绘制图表
	myChart.setOption({
		xAxis: {
			data: xData
		},
    yAxis: {},
    tooltip: {
			trigger: 'axis',
		},
		series: [
			{
				name: '数量',
				type: 'bar',
				barWidth: 50,
				data: yData,
				itemStyle: {
					borderRadius: [0, 0, 0, 0],
					color: '#1890ff'
				},
				lineStyle: {
					color: '#1890ff'
				}
				// areaStyle:{
				// 	color:'#1890ff',
				// },
			}
		]
	})
	window.onresize = function () {
		// 自适应大小
		myChart.resize()
	}

	}


onMounted(() => {
	getData()
})
	
</script>

<template>
	<div class="app-edit app-gap-block-top">
		<div class="app-container">
			<div class="table-title app-flex-left">
				成员客户数TOP10
			</div>
			<div class="app-gap-block-top">
				<div class="m-person">
					客户总计：{{total}}人
				</div>
				<div class="app-gap-block-top">
					<div id="myChart1" :style="{ width: '100%', height: '550px' }"></div>
				</div>
			</div>
		</div>
		<div></div>
	</div>
</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
	.m-person{
			font-size: var(--app-font-2);
			color: var(--el-color-primary);
	}
</style>